import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

У цьому прикладі:

• React.lazy використовується для лінивого завантаження MyComponent.
• Suspense обгортає LazyComponent.
• Проп fallback надає резервний інтерфейс (індикатор завантаження), який відображається під час завантаження MyComponent.

Реалізація Error Boundaries

У той час як Suspense обробляє стани завантаження, Error Boundaries - це React-компоненти, які перехоплюють помилки JavaScript у будь-якому місці їхнього дерева дочірніх компонентів, реєструють ці помилки та відображають резервний інтерфейс замість того, щоб спричиняти збій усього дерева компонентів.

Як працюють Error Boundaries

Error Boundaries - це класові компоненти, які визначають наступні методи життєвого циклу:

• static getDerivedStateFromError(error): Цей метод викликається після того, як дочірній компонент викинув помилку. Він отримує помилку, яка була викинута, як аргумент і повинен повернути значення для оновлення стану.
• componentDidCatch(error, info): Цей метод викликається після того, як дочірній компонент викинув помилку. Він отримує помилку та об'єкт info, що містить інформацію про те, який компонент викинув помилку. Це ідеальне місце для реєстрації помилки в службі, як Sentry або Bugsnag.

Важливо: Error Boundaries перехоплюють помилки лише в компонентах нижче них у дереві. Error Boundary не може перехопити помилку всередині себе.

Приклад: Базова реалізація Error Boundary

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Щоб використати Error Boundary, обгорніть будь-який компонент, який може викинути помилку:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Інтеграція Suspense та Error Boundaries

Справжня сила полягає в поєднанні Suspense та Error Boundaries. Це дозволяє вам обробляти як стани завантаження, так і помилки в межах вашого застосунку. Рекомендовано обгортати Suspense за допомогою Error Boundary. Таким чином, якщо компонент, який ліниво завантажується, не вдається завантажити (наприклад, помилка мережі), Error Boundary може перехопити помилку та відобразити корисне повідомлення для користувача.

Приклад: Поєднання Suspense та Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...